<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>Bootcards documentation</title>

    <link rel="apple-touch-icon" sizes="57x57" href="site/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="site/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="site/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="site/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="site/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="site/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="site/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="site/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="site/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="site/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="site/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="site/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="site/images/favicon-16x16.png">
<link rel="manifest" href="site/images/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="site/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

  <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.0/css/bootcards-desktop.min.css" rel="stylesheet" />
  <link href="./css/docs.css" rel="stylesheet" />

  <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

	 <!--morris charts-->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css">

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 </head>

<body>

	  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" title="Bootcards" href="/">Bootcards</a>    
      </div>
     
     
           
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
			<li>
				<a href="../index.html"><span class="fa fa-home"></span> Home</a>
			</li>
        <li class="active">
          <a href="docs.html"><span class="fa fa-book"></span> Documentation</a>
        </li>
         <li>
            <a href="about.html"><span class="fa fa-info-circle"></span> About</a>
          </li>
			
			</ul>
      </div>          
    </div>
  </div> 

  	<script type="text/javascript">
$(document).ready( function() {
		$('body').scrollspy({ target: '.docs-menu', offset : 60})


		});
</script>

	<div class="container">  
	<div class="row">

		<div class="col-sm-3 hidden-xs">
<div class="docs-menu affix">
<ul class="nav nav-pills nav-stacked">	
				<li class="active"><a href="#doc-grid">Grid System</a></li>
				<li><a href="#doc-navigation">Navigation</a></li>
				<li class="sub"><a href="#doc-navbar">Navbar</a></li>
        <li class="sub"><a href="#doc-doublenavbar">Double Navbar</a></li>
				<li class="sub"><a href="#doc-footerbar">Footer Bar</a></li>
				<li class="sub"><a href="#doc-slidingsidebar">Sliding Sidebar</a></li>
				<li><a href="#doc-lists">Lists</a></li>
				<li class="sub"><a href="#doc-listdetail">Detailed Lists</a></li>
				<li><a href="#doc-listsearch">List Search &amp; List Actions</a></li>
				<li><a href="#doc-cards">Cards</a></li>
				<li class="sub"><a href="#doc-basecard">Base Cards</a></li>
				<li class="sub"><a href="#doc-formcard">Form Cards</a></li>
				<li class="sub"><a href="#doc-tablecard">Table Cards</a></li>
				<li class="sub"><a href="#doc-chartcard">Chart Cards</a></li>
				<li class="sub"><a href="#doc-summarycard">Summary Cards</a></li>
				<li class="sub"><a href="#doc-mediacard">Media Cards</a></li>
				<li class="sub"><a href="#doc-filecard">File Cards</a></li>
				<li class="sub"><a href="#doc-richtextcard">Rich Text Cards</a></li>
				<li><a href="#doc-modals">Modals</a></li>
			
</ul>
			</div>
		</div>

		<div class="col-sm-9 bootcards-cards bootcards-documentation-cards">

			<div class="panel panel-default bootcards-richtext">
				<div class="panel-body"><!--
					<a name="overview"></a>
					<div class="bs-docs-section">
						<h2>Overview</h2>
						<p class="lead">Overview blurb goes here lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum fermentum lorem ut condimentum.</p>
						<p>Quisque consequat vestibulum ante, vitae sagittis ligula tempus at. Morbi elementum ultrices magna, vel molestie nulla ullamcorper vitae. Suspendisse metus ipsum, lacinia ut lacinia eget, ultricies ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
						<p>Fusce porttitor urna metus, sit amet aliquam justo varius vel. Vestibulum dapibus felis quis turpis ornare, id luctus augue luctus. Fusce non tristique nisl. Morbi commodo diam eu ultrices rutrum. Aliquam sit amet magna porttitor, fermentum neque in, egestas erat. Praesent tellus ligula, vestibulum a nulla tristique, consectetur pellentesque dolor. Mauris sed nulla nec mauris lacinia rhoncus. Quisque vestibulum lacus sit amet enim ornare auctor. Ut dui nunc, convallis non pretium at, malesuada id sapien. Nulla ac ligula et massa vehicula scelerisque non ut neque. Sed odio neque, molestie ac elementum vitae, consectetur ut ligula.</p>
						
					</div>
				-->


					<div id="doc-grid" class="bs-docs-section">
						<h2>Grid System</h2>
						<p class="lead">Bootcards builds on Twitter Bootstrap's grid system to allow separate column scrolling in touchscreen devices.</p>
						<p>The 2 main top-level columns are <code>.bootcards-list</code> (which is used to navigate your app) and <code>.bootcards-cards</code> (which contains your app's content). In desktop browsers, these will behave like regular bootstrap columns, but on touchscreen devices the user will be able to scroll them separately.</p>


<div class="highlight"><pre><code class="html">&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-5 bootcards-list&quot;&gt;
      
        ...your Bootcards List goes here...
        
      &lt;/div&gt;
      &lt;div class=&quot;col-sm-7 bootcards-cards&quot;&gt;
      
        ...your Bootcards Cards go here...
        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre></div>
					</div>						
						
					<div id="doc-navigation" class="bs-docs-section">
						<h2>Navigation</h2>
						<p class="lead">Bootcards offers 3 navigation methods: the Navbar, Footer Bar, or Sliding Sidebar.</p>
						<p>What you use will depend on the needs of your app, and the number of top-level navigation items. Apps with fewer items would suit using footer navigation on mobile, as they're always accessible, but footer navigation may be impractical for apps with many top level navigation items as it can only fit 4 on phones.</p>
					</div>
	
					<div id="doc-navbar" class="bs-docs-section">
						<h3>Navbar</h3>
						<p class="lead">The Bootcards Navbar is the main navigation system for desktop browsers.</p>
						<p>On desktop, it uses Bootstrap's default <code>.navbar-fixed-top</code> styles and shows all the top level navigation items.</p>
						<p>On mobile devices, there isn't enough space for these items, so the Bootstrap Navbar is replaced with a simpler, more native version with only a Title and limited space for other functions (e.g. a Back button or Menu button). These buttons are hidden from desktop browsers, which don't need them.</p>
						<p><strong>In addition to the Navbar, you'll also need to implement one of the other navigation structures below (Footer Bar or Sliding Sidebar) to allow mobile users to navigate your app.</strong></p>
						
<div class="highlight"><pre><code class="html">&lt;div class=&quot;navbar navbar-default navbar-fixed-top&quot; role=&quot;navigation&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;navbar-header&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-back pull-left hidden&quot; onclick=&quot;history.back()&quot;&gt;
      &lt;i class=&quot;fa fa-lg fa-chevron-left&quot;&gt;&lt;/i&gt;
      &lt;span&gt;Back&lt;/span&gt;
    &lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-menu pull-left offcanvas-toggle&quot;&gt;
      &lt;i class=&quot;fa fa-lg fa-bars&quot;&gt;&lt;/i&gt;
      &lt;span&gt;Menu&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class=&quot;navbar-brand&quot; title=&quot;Customers v{{getAppVersion}}&quot; href=&quot;/&quot;&gt;Customers&lt;/a&gt;
    &lt;div class=&quot;navbar-collapse collapse&quot;&gt;
      &lt;ul class=&quot;nav navbar-nav&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;
            &lt;i class=&quot;fa fa-users&quot;&gt;&lt;/i&gt; 
            Contacts
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            &lt;i class=&quot;fa fa-building-o&quot;&gt;&lt;/i&gt; 
            Companies
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
            &lt;i class=&quot;fa fa-gears&quot;&gt;&lt;/i&gt; 
            Settings
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>					
					</div>

          <div id="doc-doublenavbar" class="bs-docs-section">
            <h3>Double Navbar</h3>
            <p class="lead">The Double Navbar is meant for desktop and allows you to have two rows of menu options.</p>

            <div>

          <div class="navbar navbar-default bootcards-navbar-double" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </div>
            
              <a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>  

              <!--navbar menu options: shown on desktop only -->
              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right bootcards-nav-secondary">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" aria-expanded="false">
                      <i class="fa fa-globe"></i>
                      Languages <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Deutsch</a></li>
                      <li><a href="#"><i class="fa fa-fw fa-check pull-right"></i>English</a></li>
                      <li><a href="#">Espanol</a></li>
                    </ul>
                  </li> 
                  <li>
                    <a href="#">
                      <i class="fa fa-fw fa-lock"></i>
                      Login
                    </a>
                  </li>    
                </ul>
                <ul class="nav navbar-nav navbar-right bootcards-nav-primary">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                      <i class="fa fa-fw fa-dashboard"></i>
                      Home <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i> Action</a></li>
                      <li><a href="#"><i class="fa fa-fw fa-film"></i> Another action</a></li>
                      <li><a href="#"><i class="fa fa-fw fa-file-o"></i> Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Separated link</a></li>
                    </ul>
                  </li>
                  
                  <li>
                    <a href="#">
                      <i class="fa fa-fw fa-briefcase"></i>
                      Portfolio
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-fw fa-bullhorn"></i>
                      Blog
                    </a>
                  </li>
                  
                </ul>
              </div>
            </div><!--container-fluid-->
          </div>  <!--navbar-->    

          </div>

            <p>
              Set <code>class="has-bootcards-navbar-double"</code> on the body element to deal with the increased height of the navbar.
            </p>

            <div class="highlight"><pre><code class="html">&lt;div class="navbar navbar-default bootcards-navbar-double" role="navigation"&gt;
&lt;div class="container-fluid"&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;

  &lt;a class="navbar-brand" title="Bootcards Starter" href="/"&gt;Bootcards Starter&lt;/a&gt;  

  &lt;!--navbar menu options: shown on desktop only --&gt;
  &lt;div class="navbar-collapse collapse"&gt;
    &lt;ul class="nav navbar-nav navbar-right bootcards-nav-secondary"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
          &lt;i class="fa fa-globe"&gt;&lt;/i&gt;
          Languages &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Deutsch&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-fw fa-check pull-right"&gt;&lt;/i&gt;English&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Espanol&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt; 
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-fw fa-lock"&gt;&lt;/i&gt;
          Login
        &lt;/a&gt;
      &lt;/li&gt;    
    &lt;/ul&gt;
    &lt;ul class="nav navbar-nav navbar-right bootcards-nav-primary"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
          &lt;i class="fa fa-fw fa-dashboard"&gt;&lt;/i&gt;
          Home &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-fw fa-envelope-o"&gt;&lt;/i&gt; Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-fw fa-film"&gt;&lt;/i&gt; Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-fw fa-file-o"&gt;&lt;/i&gt; Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-fw fa-bar-chart-o"&gt;&lt;/i&gt; Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-fw fa-briefcase"&gt;&lt;/i&gt;
          Portfolio
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;
          &lt;i class="fa fa-fw fa-bullhorn"&gt;&lt;/i&gt;
          Blog
        &lt;/a&gt;
      &lt;/li&gt;
      
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;!--container-fluid--&gt;
&lt;/div&gt;  &lt;!--navbar--&gt; 
          </code></pre></div>


           
          

        		
					<div id="doc-footerbar" class="bs-docs-section">
						<h3>Footer Bar</h3>
						<p class="lead">The Footer Bar offers usable mobile navigation for simpler apps with a few important navigation items.</p>
						<p>This uses Bootstrap's <code>.navbar-fixed-footer</code> markup, with a <code>.btn-group</code> to contain the navigation elements. These are styled to look like native footer tabs on iOS and Android devices.</p>
						<p>On desktop, the footer reverts to a simple, website-style footer to hold items like copyright information, version numbers, etc. These are contained in <code>.bootcards-desktop-footer</code>, and hidden from mobile devices.</p>
						
<div class="highlight"><pre><code class="html">&lt;div class=&quot;navbar navbar-default navbar-fixed-bottom&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-default active&quot;&gt;
        &lt;i class=&quot;fa fa-2x fa-users&quot;&gt;&lt;/i&gt;
        Contacts
      &lt;/a&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;
        &lt;i class=&quot;fa fa-2x fa-building-o&quot;&gt;&lt;/i&gt;
        Companies
      &lt;/a&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;
        &lt;i class=&quot;fa fa-2x fa-gears&quot;&gt;&lt;/i&gt;
        Settings
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;bootcards-desktop-footer clearfix&quot;&gt;
      &lt;p class=&quot;pull-left&quot;&gt;Text for desktop footer goes here&lt;/p&gt;
      &lt;p class=&quot;pull-left&quot;&gt;More text for desktop footer goes here&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>						
						
            <p>Apply the <code>.bootcards-nofooter</code> to the <code>&lt;body&gt;</code> element for layouts without a footer: this will remove the standard bottom padding.</p>
					</div>	
					
					<div id="doc-slidingsidebar" class="bs-docs-section">
						<h3>Sliding Sidebar ('offcanvas')</h3>
						<p class="lead">The Sliding Sidebar offers complex apps more space navigation items.</p>
						<p>This is hidden by default, and accessed when required via a Menu button on the left-hand side of the Navbar.</p>
						<p>On desktop browsers, the Sliding Sidebar is inactive, as it's unnecessary.</p>
						<p>The Sliding Sidebar consists of two elements:
						<li>A button to show/ hide the sidebar:</li>
						</p>

					<div class="highlight"><pre><code class="html">&lt;button type="button" class="btn btn-default btn-menu" data-toggle="offcanvas"&gt;
    &lt;i class="fa fa-lg fa-bars"&gt;&lt;/i&gt;
    &lt;span&gt;Menu&lt;/span&gt;
&lt;/button&gt;</code></pre></div>
						<p>
						Bootcards tries to find the element that has <code>data-toggle="offcanvas"</code> and attaches a handler to show/ hide the menu.

							<li>The menu:</li>
						</p>

<div class="highlight"><pre><code class="html">&lt;div class=&quot;navmenu offcanvas offcanvas-left&quot;&gt;
  &lt;ul class=&quot;nav&quot;&gt;
    &lt;li class=&quot;active&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;i class=&quot;fa fa-lg fa-users&quot;&gt;&lt;/i&gt;
        Contacts
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;i class=&quot;fa fa-lg fa-building-o&quot;&gt;&lt;/i&gt;
        Companies
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;i class=&quot;fa fa-lg fa-gears&quot;&gt;&lt;/i&gt;
        Settings
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre></div>						
						
					</div>	

          <h4>Submenus</h4>

          <p>Using the standard Bootstap 'collapse' function, the offcanvas can also contain menu options with submenu options.</p>	

          <div class="highlight"><pre><code class="html">&lt;!--option with submenu--&gt;
&lt;li class="collapse litop4"&gt;
  &lt;a href="#otherControls" class="bootcards-parent" data-toggle="collapse" data-parent=".collapse"&gt;
    &lt;i class="fa fa-lg fa-fw fa-chevron-circle-right"&gt;&lt;/i&gt;&nbsp;Settings
  &lt;/a&gt;
  &lt;div id="otherControls" class="collapse in"&gt;
    &lt;ul class="nav navmenu-nav"&gt;&lt;li &gt;
      &lt;a href="#" &gt;&lt;i class="fa fa-lg fa-fw fa-cog"&gt;&lt;/i&gt;&nbsp;General&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;&lt;i class="fa fa-lg fa-fw fa-user"&gt;&lt;/i&gt;&nbsp;Account&lt;/a&gt;
    &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#"&gt;&lt;i class="fa fa-lg fa-fw fa-refresh"&gt;&lt;/i&gt;&nbsp;Sync&lt;/a&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/li&gt;</code></pre></div>		

          <p>Enable the collapsible menu using the following script: <code>$('.collapse').collapse();</code></p>
          <p>For more details, see <a href="http://getbootstrap.com/javascript/#collapse" target="_blank">here</a>.									

					<div id="doc-lists" class="bs-docs-section">
						<h2>Lists</h2>
						<p class="lead">Bootcards Lists are used to navigate the entities in your app (e.g. Contacts, Files, Messages, etc).</p>
						<p>Lists are wrapped in the <code>.bootcards-list</code> class</p>
						<div class="bs-example bs-example-type">
						
							<div class="bootcards-list">
								<div class="panel panel-default">				
									<div class="list-group">
										<a class="list-group-item" href="#">
								 			<img src="images/Sofia Acey.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Acey, Sofia</h4>
											<p class="list-group-item-text">Masung Corp.</p>
										</a>
										<a class="list-group-item" href="#">
								 			<img src="images/Joseph Barish.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Barish, Joseph</h4>
											<p class="list-group-item-text">Masung Corp.</p>
										</a>
										<a class="list-group-item" href="#">
								 			<img src="images/Sarah Benson.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Benson, Sarah</h4>
											<p class="list-group-item-text">ZetaComm</p>
										</a>
									</div>
								</div>
							</div>
												
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;bootcards-list&quot;&gt;
  &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;list-group&quot;&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;img src=&quot;/images/Sofia Acey.jpg&quot; class=&quot;img-rounded pull-left&quot;/&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Acey, Sofia&lt;/h4&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Masung Corp.&lt;/p&gt;
      &lt;/a&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;img src=&quot;/images/Joseph Barish.jpg&quot; class=&quot;img-rounded pull-left&quot;/&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Barish, Joseph&lt;/h4&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Masung Corp.&lt;/p&gt;
      &lt;/a&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;img src=&quot;/images/Sarah Benson.jpg&quot; class=&quot;img-rounded pull-left&quot;/&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Benson, Sarah&lt;/h4&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;ZetaComm&lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>



					<div id="doc-listdetail" class="bs-docs-section">
						<h3>Detailed Lists</h3>
						<p class="lead">Detailed Lists can be used when you need to show more information for each entry.</p>
						<p>You can use Bootstrap <code>.col-*</code> <code>&lt;div&gt;</code>s within each <code>.list-group-item</code> to show more pieces of information in whatever format you like, and respond to different device widths.</p>
						<div class="bs-example bs-example-type">
						
							<div class="bootcards-list">
								<div class="panel panel-default">				
									<div class="list-group">
										<a class="list-group-item" href="#">
											<div class="row">
												<div class="col-sm-6">
													<i class="fa fa-3x fa-building-o pull-left"></i>
													<h4 class="list-group-item-heading">Alparvis Ltd</h4>
													<p class="list-group-item-text">London, UK</p>
												</div>
												<div class="col-sm-6">
													<p class="list-group-item-text">Contractor</p>
													<p class="list-group-item-text">$12,000 Revenue YTD</p>
												</div>
											</div>
										</a>
										<a class="list-group-item" href="#">
											<div class="row">
												<div class="col-sm-6">
													<i class="fa fa-3x fa-building-o pull-left"></i>
													<h4 class="list-group-item-heading">Camion Corp</h4>
													<p class="list-group-item-text">Tokyo, Japan</p>
												</div>
												<div class="col-sm-6">
													<p class="list-group-item-text">Customer</p>
													<p class="list-group-item-text">$75,000 Revenue YTD</p>
												</div>
											</div>
										</a>
										<a class="list-group-item" href="#">
											<div class="row">
												<div class="col-sm-6">
													<i class="fa fa-3x fa-building-o pull-left"></i>
													<h4 class="list-group-item-heading">Derenden Systems</h4>
													<p class="list-group-item-text">Albuquerque, USA</p>
												</div>
												<div class="col-sm-6">
													<p class="list-group-item-text">Supplier</p>
													<p class="list-group-item-text">$1.3m Revenue YTD</p>
												</div>
											</div>
										</a>
									</div>
								</div>
							</div>
												
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;bootcards-list&quot;&gt;
  &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;list-group&quot;&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;i class=&quot;fa fa-3x fa-building-o pull-left&quot;&gt;&lt;/i&gt;
            &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Alparvis Ltd&lt;/h4&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;London, UK&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;Contractor&lt;/p&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;$12,000 Revenue YTD&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;i class=&quot;fa fa-3x fa-building-o pull-left&quot;&gt;&lt;/i&gt;
            &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Camion Corp&lt;/h4&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;Tokyo, Japan&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;Customer&lt;/p&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;$75,000 Revenue YTD&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a class=&quot;list-group-item&quot; href=&quot;#&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;i class=&quot;fa fa-3x fa-building-o pull-left&quot;&gt;&lt;/i&gt;
            &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Derenden Systems&lt;/h4&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;Albuquerque, USA&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;Supplier&lt;/p&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;$1.3m Revenue YTD&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>					


					<div id="doc-listsearch" class="bs-docs-section">
						<h2>List Search &amp; List Actions</h2>
						<p class="lead">A search form for when you want the user to be able to filter or search your list, and buttons for any other list functions you need.</p>
						<p>This goes at the top of your list, inside the <code>.modal-body</code>. You can add or remove functions by adding/removing columns in the containing <code>.row</code> and making sure the widths add up.</p>
						<div class="bs-example bs-example-type">
						
							<div class="bootcards-list">
								<div class="panel panel-default">

									<div class="panel-body">
										<form>
											<div class="row">
											    <div class="col-xs-9">
											      <div class="form-group">
												      <input type="text" class="form-control" placeholder="Search Contacts...">
												      <i class="fa fa-search"></i>
											      </div>
											    </div>
											    <div class="col-xs-3">
													<a class="btn btn-primary btn-block" href="#">
														<i class="fa fa-plus"></i> 
														Add
													</a>
											    </div>
											</div>						    
										</form>					
									</div>								
												
									<div class="list-group">
										<a class="list-group-item" href="#">
								 			<img src="images/Sofia Acey.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Acey, Sofia</h4>
											<p class="list-group-item-text">Masung Corp.</p>
										</a>
										<a class="list-group-item" href="#">
								 			<img src="images/Joseph Barish.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Barish, Joseph</h4>
											<p class="list-group-item-text">Masung Corp.</p>
										</a>
										<a class="list-group-item" href="#">
								 			<img src="images/Sarah Benson.jpg" class="img-rounded pull-left"/>
											<h4 class="list-group-item-heading">Benson, Sarah</h4>
											<p class="list-group-item-text">ZetaComm</p>
										</a>
									</div>
								</div>
							</div>
												
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;bootcards-list&quot;&gt;
  &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
      &lt;form&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-xs-9&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Search Contacts...&quot;&gt;
              &lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-xs-3&quot;&gt;
            &lt;a class=&quot;btn btn-primary btn-block&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;
              Add
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;

    ...list markup goes here...

  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>

					<div id="doc-cards" class="bs-docs-section">
						<h2>Cards</h2>
						<p class="lead">Cards are the core of Bootcards, and contain your app's content. Different Cards are available for different types of content (text, tables, forms, charts, media, files, etc).</p>
						<p>Cards are based on the same markup as Bootstrap's <code>.panel</code>. Each card can have a <code>.panel-heading</code>, <code>.panel-body</code> and a <code>.panel-footer</code>. All of these are optional, so just use whichever parts your app needs. You can even use multiple headers or footers (e.g. if you needed separate footer areas separated by a divider).</p>
						<div class="bs-example bs-example-type">
							<div class="panel panel-default">
								<div class="panel-heading clearfix">
									<h3 class="panel-title pull-left">Card Title</h3>
									<a class="btn btn-default pull-right" href="#">
										<i class="fa fa-check"></i>
										Button
									</a>
								</div>
								<div class="panel-body">
									<p>Card content...</p>
								</div>
								<div class="panel-footer">
									<small>Card footer...</small>
								</div>
							</div>						
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default&quot;&gt;
  &lt;div class=&quot;panel-heading clearfix&quot;&gt;
    &lt;h3 class=&quot;panel-title pull-left&quot;&gt;Card Title&lt;/h3&gt;
      &lt;a class=&quot;btn btn-default pull-right&quot; href=&quot;#&quot;&gt;
        &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
        Button
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    &lt;p&gt;Card content...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Card footer...&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>
	
					<div id="doc-basecard" class="bs-docs-section">
						<h3>Base Cards</h3>
						<p class="lead">Base Cards display a list of information separated by dividers.</p>
						<p>Replace the default <code>.panel-body</code> with a <code>.list-group</code>.</p>						
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default">
								<div class="panel-heading clearfix">
									<h3 class="panel-title pull-left">Base Card Title</h3>
									<a class="btn btn-primary pull-right" href="#">
										<i class="fa fa-pencil"></i>
										Edit
									</a>
								</div>
								<div class="list-group">
									<div class="list-group-item">
										<p class="list-group-item-text">Name</p>
										<h4 class="list-group-item-heading">John Smith</h4>
									</div>
									<div class="list-group-item">
										<p class="list-group-item-text">Occupation</p>
										<h4 class="list-group-item-heading">Web Developer</h4>
									</div>
									<div class="list-group-item">
										<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.</p>
									</div>
								</div>
								<div class="panel-footer">
									<small>Built with Bootcards - Base Card</small>
								</div>
							</div>
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default&quot;&gt;
  &lt;div class=&quot;panel-heading clearfix&quot;&gt;
    &lt;h3 class=&quot;panel-title pull-left&quot;&gt;Base Card Title&lt;/h3&gt;
      &lt;a class=&quot;btn btn-primary pull-right&quot; href=&quot;#&quot;&gt;
        &lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt;
        Edit
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;list-group&quot;&gt;
      &lt;div class=&quot;list-group-item&quot;&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Name&lt;/p&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;John Smith&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class=&quot;list-group-item&quot;&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Occupation&lt;/p&gt;
        &lt;h4 class=&quot;list-group-item-heading&quot;&gt;Web Developer&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class=&quot;list-group-item&quot;&gt;
        &lt;p class=&quot;list-group-item-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Base Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>
	
					<div id="doc-formcard" class="bs-docs-section">
						<h3>Form Cards</h3>
						<p class="lead">Form Cards are used for user input in your app.</p>
						<p>Replace the default <code>.panel-body</code> with a <code>&lt;form&gt;</code>.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default">
								<div class="panel-heading clearfix">
									<h3 class="panel-title pull-left">Form Card Title</h3>
									<div class="btn-group pull-right">
										<button class="btn btn-danger">
											<i class="fa fa-times"></i>
											Cancel
										</button>
										<button class="btn btn-success">
											<i class="fa fa-check"></i>
											Save
										</button>
									</div>
								</div>
								<div class="modal-body">
									<form class="form-horizontal">
										<div class="form-group">
											<label class="col-xs-3 control-label">Name</label>
											<div class="col-xs-9">
												<input type="text" class="form-control" value="John Smith">
											</div>
										</div>
										<div class="form-group">
											<label class="col-xs-3 control-label">Occupation</label>
											<div class="col-xs-9">
												<select class="form-control">
													<option>Designer</option>
													<option selected>Developer</option>
													<option>Salesman</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-xs-3 control-label">Description</label>
											<div class="col-xs-9">
												<textarea class="form-control" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.</textarea>
											</div>
										</div>
									</form>
								</div>
								<div class="panel-footer">
									<small>Built with Bootcards - Form Card</small>
								</div>
							</div>
						</div>
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default&quot;&gt;
  &lt;div class=&quot;panel-heading clearfix&quot;&gt;
    &lt;h3 class=&quot;panel-title pull-left&quot;&gt;Form Card Title&lt;/h3&gt;
    &lt;div class=&quot;btn-group pull-right&quot;&gt;
      &lt;button class=&quot;btn btn-danger&quot;&gt;
        &lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;
        Cancel
      &lt;/button&gt;
      &lt;button class=&quot;btn btn-success&quot;&gt;
        &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
        Save
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-body&quot;&gt;
    &lt;form class=&quot;form-horizontal&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Name&lt;/label&gt;
        &lt;div class=&quot;col-xs-9&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;John Smith&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Occupation&lt;/label&gt;
        &lt;div class=&quot;col-xs-9&quot;&gt;
          &lt;select class=&quot;form-control&quot;&gt;
            &lt;option&gt;Designer&lt;/option&gt;
            &lt;option selected&gt;Developer&lt;/option&gt;
            &lt;option&gt;Salesman&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Description&lt;/label&gt;
        &lt;div class=&quot;col-xs-9&quot;&gt;
          &lt;textarea class=&quot;form-control&quot; rows=&quot;6&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Form Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>


	
					<div id="doc-tablecard" class="bs-docs-section">
						<h3>Table Cards</h3>
						<p class="lead">Table Cards display tabular data.</p>
						<p>You can use the same table classes as Bootstrap, e.g. the <code>.table-hover</code> and <code>.active</code> classes used in this example.</p>
						<p>Wrap wider tables in a <code>&lt;div class="table-responsive"&gt;</code> so they'll be able to scroll horizontally in narrower browsers such as mobiles, and not be cut off.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Table Card Title</h3>
								</div>
								<div class="table-responsive">
									<table class="table table-hover">
										<thead>
											<tr class="active"><th>Name</th><th>Forecast</th><th>Quota</th></tr>
										</thead>
										<tbody>
											<tr><td>Guy Bardsley</td><td>2750</td><td>4000</td></tr>
											<tr><td>Adam Callahan</td><td>3300</td><td>4000</td></tr>
											<tr><td><strong>Total</strong></td><td><strong>6050</strong></td><td><strong>8000</strong></td></tr>
										</tbody>
									</table>
								</div>
								<div class="panel-footer">
									<small>Built with Bootcards - Table Card</small>
								</div>
							</div>
							
						</div>
	
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;Table Card Title&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;table-responsive&quot;&gt;
    &lt;table class=&quot;table table-hover&quot;&gt;
      &lt;thead&gt;
        &lt;tr class=&quot;active&quot;&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Forecast&lt;/th&gt;&lt;th&gt;Quota&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;Guy Bardsley&lt;/td&gt;&lt;td&gt;2750&lt;/td&gt;&lt;td&gt;4000&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Adam Callahan&lt;/td&gt;&lt;td&gt;3300&lt;/td&gt;&lt;td&gt;4000&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;strong&gt;Total&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;strong&gt;6050&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;strong&gt;8000&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Table Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>
	
	
	
					<div id="doc-chartcard" class="bs-docs-section">
						<h3>Chart Cards</h3>
						<p class="lead">Chart cards contain charts powered by Morris.js.</p>
						<p>These can be used with Table cards in order to toggle between a chart view and the raw data.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default bootcards-chart">
								<div class="panel-heading">
									<h3 class="panel-title">Chart Card Heading</h3>					
								</div>
								<div class="bootcards-chart-canvas" id="barChart"></div>
								<div class="panel-footer">
									<small>Built with Bootcards - Chart Card</small>
								</div>					
							</div>
						
							<script type="text/javascript">
								var drawCharts = function() {
									$("#barChart").empty();
									Morris.Bar({
										element: 'barChart',
										data: [
											{person: 'Guy Bardsley', sales: 550},
											{person: 'Adam Callahan', sales: 1500},
											{person: 'Arlo Geist', sales: 3750},
											{person: 'Sheila Hutchins', sales: 3500}
										],
										xkey: 'person',
										ykeys: ['sales'],
										labels: ['Sales'],
										hideHover: 'auto'
									});
								}
								$(document).ready( function() {
									drawCharts();
								});
								$(window).on('resize', function() {
									drawCharts();
								});						
							</script>						
							
						</div>
	
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default bootcards-chart&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;Chart Card Heading&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;bootcards-chart-canvas&quot; id=&quot;barChart&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Chart Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  var drawCharts = function() {
    $(&quot;#barChart&quot;).empty();
    Morris.Bar({
      element: 'barChart',
      data: [
        {person: 'Guy Bardsley', sales: 550},
        {person: 'Adam Callahan', sales: 1500},
        {person: 'Arlo Geist', sales: 3750},
        {person: 'Sheila Hutchins', sales: 3500}
      ],
      xkey: 'person',
      ykeys: ['sales'],
      labels: ['Sales'],
      hideHover: 'auto'
    });
  }
  $(document).ready( function() {
    drawCharts();
  });
  $(window).on('resize', function() {
    drawCharts();
  });
&lt;/script&gt;</code></pre></div>
					</div>
	
	
					<div id="doc-summarycard" class="bs-docs-section">
						<h3>Summary Cards</h3>
						<p class="lead">Summary cards can be used on dashboards, etc to highlight important pieces of data in your app.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default bootcards-summary">
								<div class="panel-heading">
									<h3 class="panel-title">Summary Card Heading</h3>
								</div>
								<div class="panel-body">
									<div class="row">
										<div class="col-xs-6 col-sm-4">
											<a class="bootcards-summary-item" href="#">
												<i class="fa fa-3x fa-users"></i>
												<h4>Contacts <span class="label label-info">432</span></h4>
											</a>
										</div>
										<div class="col-xs-6 col-sm-4">
											<a class="bootcards-summary-item" href="#">
												<i class="fa fa-3x fa-building-o"></i>
												<h4>Companies <span class="label label-info">98</span></span></h4>
											</a>
										</div>
										<div class="col-xs-6 col-sm-4">
											<a class="bootcards-summary-item" href="#">
												<i class="fa fa-3x fa-clipboard"></i>
												<h4>Notes <span class="label label-danger">54</span></h4>
											</a>
										</div>
										<div class="col-xs-6 col-sm-4">
											<a class="bootcards-summary-item" href="#">
												<i class="fa fa-3x fa-files-o"></i>
												<h4>Files <span class="label label-info">65</span></h4>
											</a>
										</div>
										<div class="col-xs-6 col-sm-4">
											<a class="bootcards-summary-item" href="#">
												<i class="fa fa-3x fa-check-square-o"></i>
												<h4>Tasks <span class="label label-warning">109</span></h4>
											</a>
										</div>
									</div>
								</div>
								<div class="panel-footer">
									<small>Built with Bootcards - Summary Card</small>
								</div>	
							</div>
							
						</div>
	
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default bootcards-summary&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;Summary Card Heading&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-xs-6 col-sm-4&quot;&gt;
        &lt;a class=&quot;bootcards-summary-item&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-3x fa-users&quot;&gt;&lt;/i&gt;
          &lt;h4&gt;Contacts &lt;span class="label label-info"&gt;432&lt;/span&gt;&lt;/h4&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-xs-6 col-sm-4&quot;&gt;
        &lt;a class=&quot;bootcards-summary-item&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-3x fa-building-o&quot;&gt;&lt;/i&gt;
          &lt;h4&gt;Companies &lt;span class="label label-info"&gt;98&lt;/span&gt;&lt;/h4&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-xs-6 col-sm-4&quot;&gt;
        &lt;a class=&quot;bootcards-summary-item&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-3x fa-clipboard&quot;&gt;&lt;/i&gt;
          &lt;h4&gt;Notes &lt;span class="label label-danger"&gt;54&lt;/span&gt;&lt;/h4&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-xs-6 col-sm-4&quot;&gt;
        &lt;a class=&quot;bootcards-summary-item&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-3x fa-files-o&quot;&gt;&lt;/i&gt;
          &lt;h4&gt;Files &lt;span class="label label-info"&gt;65&lt;/span&gt;&lt;/h4&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-xs-6 col-sm-4&quot;&gt;
        &lt;a class=&quot;bootcards-summary-item&quot; href=&quot;#&quot;&gt;
          &lt;i class=&quot;fa fa-3x fa-check-square-o&quot;&gt;&lt;/i&gt;
          &lt;h4&gt;Tasks &lt;span class="label label-warning"&gt;109&lt;/span&gt;&lt;/h4&gt;
        &lt;/a&gt;
      &lt;/div&gt;      
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Summary Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>
	
	
					<div id="doc-mediacard" class="bs-docs-section">
						<h3>Media Cards</h3>
						<p class="lead">Media Cards hold larger images or videos.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default bootcards-media">
								<div class="panel-heading">
									<h3 class="panel-title">Media Card Heading</h3>
								</div>
								<div class="panel-body">
									Media card description lorem ipsum dolor est compendium
								</div>
								<img src="http://www.teamstudio.com/Portals/218295/images/istock_000001242290small.jpg" class="img-responsive"/>
								<div class="panel-footer">
									<div class="btn-group btn-group-justified">
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-arrow-down"></i>
												Download
											</button>
										</div>
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-star"></i>
												Favorite
											</button>
										</div>
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-envelope"></i>
												Email
											</button>
										</div>
									</div>
								</div>
							</div>
							
						</div>
	
<div class="highlight"><pre><code class="html">&lt;div class=&quot;panel panel-default bootcards-media&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;Media Card Heading&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    Media card description lorem ipsum dolor est compendium
  &lt;/div&gt;
  &lt;img src=&quot;http://www.teamstudio.com/Portals/218295/images/istock_000001242290small.jpg&quot; class=&quot;img-responsive&quot;/&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;div class=&quot;btn-group btn-group-justified&quot;&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-arrow-down&quot;&gt;&lt;/i&gt;
          Download
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-star&quot;&gt;&lt;/i&gt;
          Favorite
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;
          Email
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
					</div>
	
					<div id="doc-filecard" class="bs-docs-section">
						<h3>File Cards</h3>
						<p class="lead">File Cards are intended to show information and functions for non-media file formats (PDFs, Word documents, spreadsheets, etc).</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default bootcards-file">
								<div class="panel-heading">
									<h3 class="panel-title">File Card Heading</h3>
								</div>
								<div class="list-group">
									<div class="list-group-item">
										<a href="#">
											<i class="icon-file-pdf"></i>
										</a>
										<h4 class="list-group-item-heading">
											<a href="#">
												File Name Goes Here
											</a>
										</h4>
										<p class="list-group-item-text"><strong>PDF</strong></p>
										<p class="list-group-item-text"><strong>3.2Mb</strong></p>
									</div>
									<div class="list-group-item">
										<p class="list-group-item-text"><strong>Added by John Smith on 5 March 2014</strong></p>
									</div>
									<div class="list-group-item">
										<p class="list-group-item-text">MediaFile card description lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, nulla ut porta interdum, mi mi venenatis felis, vitae pellentesque ante eros at enim.</p>
									</div>
								</div>
								<div class="panel-footer">
									<div class="btn-group btn-group-justified">
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-arrow-down"></i>
												Download
											</button>
										</div>
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-star"></i>
												Favorite
											</button>
										</div>
										<div class="btn-group">
											<button class="btn btn-default">
												<i class="fa fa-envelope"></i>
												Email
											</button>
										</div>
									</div>
								</div>
							</div>
							
						</div>
						<div class="highlight">
<pre><code class="html">&lt;div class=&quot;panel panel-default bootcards-file&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;File Card Heading&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;list-group&quot;&gt;
    &lt;div class=&quot;list-group-item&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;
        &lt;i class=&quot;icon-file-pdf&quot;&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;h4 class=&quot;list-group-item-heading&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;
          File Name Goes Here
        &lt;/a&gt;
      &lt;/h4&gt;
      &lt;p class=&quot;list-group-item-text&quot;&gt;&lt;strong&gt;PDF&lt;/strong&gt;&lt;/p&gt;
      &lt;p class=&quot;list-group-item-text&quot;&gt;&lt;strong&gt;3.2Mb&lt;/strong&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;list-group-item&quot;&gt;
      &lt;p class=&quot;list-group-item-text&quot;&gt;&lt;strong&gt;Added by John Smith on 5 March 2014&lt;/strong&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;list-group-item&quot;&gt;
      &lt;p class=&quot;list-group-item-text&quot;&gt;MediaFile card description lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, nulla ut porta interdum, mi mi venenatis felis, vitae pellentesque ante eros at enim.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;div class=&quot;btn-group btn-group-justified&quot;&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-arrow-down&quot;&gt;&lt;/i&gt;
          Download
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-star&quot;&gt;&lt;/i&gt;
          Favorite
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-default&quot;&gt;
          &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;
          Email
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
						</div>
					</div>

					<div id="doc-richtextcard" class="bs-docs-section">
						<h3>Rich Text Cards</h3>
						<p class="lead">Rich Text Cards are designed for longer passages of text, which may include various heading levels, paragraphs and lists.</p>
						<p>They have more padding around the <code>.panel-content</code> to help readability.</p>
						<div class="bs-example bs-example-type">
	
							<div class="panel panel-default bootcards-richtext">
								<div class="panel-heading">
									<h3 class="panel-title">Rich Text Card Heading</h3>
								</div>
								<div class="panel-body">
									<p class="lead">Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
									<h1>Heading 1</h1>
									<h2>Heading 2</h2>
									<h3>Heading 3</h3>
									<h4>Heading 4</h4>
									<h5>Heading 5</h5>
									<h6>Heading 6</h6>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.</p>
									<ul>
										<li>Duis cursus dui et turpis gravida sollicitudin.</li>
										<li>Donec eget mauris feugiat, euismod purus nec, feugiat neque.</li>
										<li>Nunc erat est, molestie eget magna in, consectetur euismod lorem.</li>
									</ul>
									<ol>
										<li>Sed luctus congue orci quis tempus.</li>
										<li>Praesent in viverra lorem.</li>
										<li>Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.</li>
									</ol>
								</div>
								<div class="panel-footer">
									<small>Built with Bootcards - Rich Text Card</small>
								</div>
							</div>
							
						</div>
						<div class="highlight">
<pre><code class="html">&lt;div class=&quot;panel panel-default bootcards-richtext&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    &lt;h3 class=&quot;panel-title&quot;&gt;Rich Text Card Heading&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    &lt;p class=&quot;lead&quot;&gt;Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.&lt;/p&gt;
    &lt;h1&gt;Heading 1&lt;/h1&gt;
    &lt;h2&gt;Heading 2&lt;/h2&gt;
    &lt;h3&gt;Heading 3&lt;/h3&gt;
    &lt;h4&gt;Heading 4&lt;/h4&gt;
    &lt;h5&gt;Heading 5&lt;/h5&gt;
    &lt;h6&gt;Heading 6&lt;/h6&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Duis cursus dui et turpis gravida sollicitudin.&lt;/li&gt;
      &lt;li&gt;Donec eget mauris feugiat, euismod purus nec, feugiat neque.&lt;/li&gt;
      &lt;li&gt;Nunc erat est, molestie eget magna in, consectetur euismod lorem.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ol&gt;
      &lt;li&gt;Sed luctus congue orci quis tempus.&lt;/li&gt;
      &lt;li&gt;Praesent in viverra lorem.&lt;/li&gt;
      &lt;li&gt;Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
  &lt;div class=&quot;panel-footer&quot;&gt;
    &lt;small&gt;Built with Bootcards - Rich Text Card&lt;/small&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
						</div>



					<div id="doc-modals" class="bs-docs-section">
						<h2>Modals</h2>
						<p class="lead">Sometimes, you'll want to put something like a form or an important message in a modal, obscuring the other content completely.</p>
						<p>The markup is quite similar to Cards, with a header, body, and footer.</p>

<div class="highlight"><pre><code class="html">&lt;div class=&quot;modal fade in&quot; role=&quot;dialog&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;

    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;form class=&quot;form-horizontal&quot;&gt;

        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;div class=&quot;btn-group pull-left&quot;&gt;
            &lt;button class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;
              Cancel
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;btn-group pull-right&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;
              Save
            &lt;/button&gt;
          &lt;/div&gt;

          &lt;h3 class=&quot;modal-title&quot;&gt;New Company&lt;/h3&gt;
        &lt;/div&gt;

        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Name&lt;/label&gt;
            &lt;div class=&quot;col-xs-9&quot;&gt;
              &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; placeholder=&quot;Company&quot; value=&quot;&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Type&lt;/label&gt;
            &lt;div class=&quot;col-xs-9&quot;&gt;
              &lt;select name=&quot;type&quot; class=&quot;form-control&quot; value=&quot;&quot;&gt;
                &lt;option value=&quot;&quot; selected=&quot;&quot;&gt;Select a Type...&lt;/option&gt;
                &lt;option value=&quot;Prospect&quot;&gt;Prospect&lt;/option&gt;
                &lt;option value=&quot;Customer&quot;&gt;Customer&lt;/option&gt;
                &lt;option value=&quot;Inactive&quot;&gt;Inactive&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-xs-3 control-label&quot;&gt;Location&lt;/label&gt;
            &lt;div class=&quot;col-xs-9&quot;&gt;
               &lt;input type=&quot;text&quot; name=&quot;location&quot; class=&quot;form-control&quot; placeholder=&quot;Location&quot; value=&quot;&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;small class=&quot;pull-left&quot;&gt;Built with Bootcards - Form Card&lt;/small&gt;
          &lt;a href=&quot;#&quot; class=&quot;btn btn-link btn-xs pull-right&quot;&gt;View Source&lt;/a&gt;
        &lt;/div&gt;

      &lt;/form&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>

						<div class="alert alert-warning">
							Remember to wrap buttons in the header of your modals in &lt;div class="btn-group"&gt; or your buttons might not work.
						</div>

						</div>
					</div>




				</div>
			</div>



		</div>

	</div>

</div>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>

<!--analytics tracking-->
	<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-47025460-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  //activate highlight.js
  hljs.initHighlightingOnLoad();

</script>

</body>

</html>